<template>
    <el-card class="box-card" shadow="never">
        <template #header>
            <div class="card-header">
                <span>系统设置</span>
            </div>
        </template>
        <el-space
            direction="vertical"
            fill
            :fill-ratio="100"
            style="width: 100%"
            :spacer="spacer"
        >
            <div class="item-set">
                <div class="left-text">
                    <div>
                        <el-text size="large">清理图片</el-text>
                    </div>
                    <div>
                        <el-text size="small" type="info">点击清理按钮能够将系统中没有关联的图片进行清理，从而节省系统空间</el-text>
                    </div>                
                </div>
                <div class="right-button">
                    <el-button type="primary" :loading="loading" @click="handleClean">{{loading ? '清理中' : '清理'}}</el-button>
                </div>
            </div>

            <!-- <el-row justify="space-between">
                <el-col :span="20">
                    <div class="left-text">
                        <el-text size="large">Large1</el-text>
                        <el-text size="small">Large</el-text>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" loading>清理中</el-button>
                </el-col>
            </el-row> -->
        </el-space>
    </el-card>
</template>
<script setup>
import { h, ref } from 'vue'
import { ElDivider,ElMessage  } from 'element-plus'
// import { cleanFiles } from '@/services'

const spacer = h(ElDivider);
const loading = ref(false);

async function handleClean() {
    if(loading.value){
        return;
    }
    loading.value = true;
    // let res = await cleanFiles();
    setTimeout(() => {
        loading.value = false;
        ElMessage({
            message: '清理成功',
            type: 'success',
        });
    }, 2000);
}
</script>
<style scoped>
.box-card {
    width: 50%;
}
.item-set{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right:100px;
}
.right-button{
    width: 150px;
    overflow: hidden;
}
</style>
